<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="_adminfragment::head(~{::title},~{})">
    <meta charset="utf-8">
    <title>订单管理</title>
    <link rel="stylesheet" type="text/css" href="../../static/lib/layui/css/layui.css"/>
    <script src="../../static/lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div th:replace="_adminfragment::header"></div>
    <div th:replace="_adminfragment::side('order')"></div>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 20px;">
            <div class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">订单编号</label>
                        <div class="layui-input-inline">
                            <input type="text" name="orderId" autocomplete="off" placeholder="请输入订单编号"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">收件人姓名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="consigneeName" autocomplete="off" placeholder="请输入收件人姓名"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn" lay-submit lay-filter="search_btn">查询</button>
                    </div>
                </div>
            </div>

            <table class="layui-hide" id="order_tb" lay-filter="order_tb"></table>
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 40px;">
                <legend style="text-align: center;">订单明细</legend>
                <div class="layui-field-box">
                    <table class="layui-table">
                        <colgroup>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                        </colgroup>
                        <thead>
                        <tr>
                            <th>书籍编号</th>
                            <th>书籍名称</th>
                            <th>单价/元</th>
                            <th>购买数量</th>
                            <th>合计/元</th>
                        </tr>
                        </thead>
                        <tbody id="order-items"></tbody>
                    </table>
                </div>
            </fieldset>

            <script type="text/html" id="order_tb_bar">
                <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
        </div>
    </div>
    <div th:replace="_adminfragment::footer"></div>
</div>
</body>
<script th:src="@{/js/admin/order.js}" type="text/javascript" charset="utf-8"></script>
<script type="text/html" id="order-item-tpl">
    {{# layui.each(d,function(index,item){   }}
    <tr>
        <td>{{item.bookId}}</td>
        <td>{{item.book_info.bookName}}</td>
        <td>{{item.book_info.price}}</td>
        <td>{{item.quantity}}</td>
        <td>{{ Math.floor(parseFloat(item.book_info.price*100 *item.quantity))/100 }}</td>
    </tr>
    {{#   }); }}
</script>
<script type="text/html" id="order-edit-tpl">
    <div class="layui-form" lay-filter="order-edit-form" style="margin-top: 20px;">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">订单编号</label>
                <div class="layui-input-block">
                    <input type="text" name="orderId" autocomplete="off" placeholder="请输入订单编号" readonly
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">收件人姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="consigneeName" autocomplete="off" placeholder="请输入收件人姓名"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <div class="layui-inline">
                <label class="layui-form-label">收货地址</label>
                <div class="layui-input-block">
                    <textarea name="address" placeholder="请输入收货地址" class="layui-textarea"></textarea>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">邮政编号</label>
                <div class="layui-input-block">
                    <input type="text" name="zip" autocomplete="off" placeholder="请输入邮政编号" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">手机号码</label>
                <div class="layui-input-block">
                    <input type="text" name="phoneNumber" autocomplete="off" placeholder="请输入手机号码" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">发货</label>
            <div class="layui-input-block">
                <input type="checkbox" name="status" value=true lay-skin="switch" lay-text="已发货|待发货">
            </div>
        </div>
    </div>
</script>
</html>
